<template>
  <view class="custom-picker">
    <!-- 省市区三级联动 -->
    <scroll-view class="picker-column" scroll-y>
      <view
          v-for="province in cityData"
          :key="province.value"
          :class="['picker-item', { active: selectedProvince === province.value }]"
          @click="onProvinceSelect(province)"
      >
        {{ province.text }}
      </view>
    </scroll-view>

    <scroll-view class="picker-column" scroll-y>
      <view
          v-for="city in currentCities"
          :key="city.value"
          :class="['picker-item', { active: selectedCity === city.value }]"
          @click="onCitySelect(city)"
      >
        {{ city.shortName }}
      </view>
    </scroll-view>

    <scroll-view class="picker-column" scroll-y>
      <view
          v-for="district in currentDistricts"
          :key="district.value"
          :class="['picker-item', { active: selectedDistrict === district.value }]"
          @click="onDistrictSelect(district)"
      >
        {{ district.shortName }}
      </view>
    </scroll-view>
  </view>
</template>

<script>

import {getCommonListAddr} from "../../../api/new";

export default {
  data() {
    return {
      selectedValue: [], // 默认选中的值，如 ['330000', '330100', '330106']
      cityData: [],
      parentCode: null,
      level: 0,
      value: null,
      selectedProvince: null,
      selectedCity: null,
      selectedDistrict: null,
      currentCities: [],
      currentDistricts: [],
    }
  },
  created() {
    this.loadCityData(this.parentCode, this.level, this.value);
  },
  methods: {
    onProvinceSelect(province) {

      this.selectedProvince = province.value;
      const parentCode = province.parentCode
      const level = province.level
      const value = province.value
      this.a(parentCode, level, value)
      this.currentCities = province.children
      this.currentDistricts = [];
    },
    a(parentCode, level, value) {
      const params = {
        pageNum: 1,
        pageSize: 10000,
        parentCode: value
      };
      getCommonListAddr(params).then(res => {
        this.currentCities = res.data.rows.map(item => ({
          // 保持与模板中使用的字段名一致
          value: item.areaCode,
          shortName: item.shortName,
          parentCode: item.parentCode
        }));
        console.log('处理后的市级数据:', this.currentCities);
        this.$forceUpdate();
      })
    },
    // 修改onCitySelect方法
    onCitySelect(city) {
      this.selectedCity = city.value;
      const parentCode = city.parentCode
      const areaCode = city.value
      this.b(parentCode, areaCode)
    },
    onDistrictSelect(district) {
      // 存储参数到本地
      uni.setStorageSync('studyParams', {
        shortName: district.shortName,
        lng: district.lng,
        lat: district.lat
      });
      console.log(111)
      // 跳转页面（不带参数）
      uni.switchTab({
        url: '/pages/study/index'
      });
    },
    // 在b方法中完善数据映射
    b(parentCode, areaCode) {
      const params = {
        pageNum: 1,
        pageSize: 10000,
        parentCode: areaCode
      }
      console.log(params)
      getCommonListAddr(params).then(res => {
        console.log(res)
        this.currentDistricts = res.data.rows.map(item => ({
          // 保持与模板中使用的字段名一致
          value: item.areaCode,
          shortName: item.shortName,
          lng: item.lng,  // 确保接口返回字段匹配
          lat: item.lat
        }));
        console.log('处理后的区级数据:', this.currentDistricts);
        this.$forceUpdate();
      })
    },
    loadCityData(parentCode, level, value) {
      const params = {
        parentCode: level === 0 ? '0' :
            (level === 2 || level === 3) ? value :
                null,
        areaCode: level === 4 ? value : null
      }
      console.log('优化后请求参数:', params)
      getCommonListAddr(params).then(res => {
        const rows = res.data.rows || []
        const level1 = rows.filter(item => item.level === 1);
        if (level === 0) {
          // 加载省级，直接拼接
          const provinces = level1.map(province => ({
            text: province.shortName,
            value: province.areaCode,
            parentCode: province.parentCode,
            level: province.level,
            children: []
          }));
          this.cityData.push(...provinces);
          console.log(this.cityData)
          console.log(provinces)
          console.log(level1)
          console.log(rows)
        }
      })
      .catch(error => {
        console.error('获取失败', error)
      })
    },
  }
}
</script>
<style scoped lang="scss">
.custom-picker {
  display: flex;
  height: 100vh;
  background-color: #f4f6f9;
  padding: 20rpx 10rpx;
  box-sizing: border-box;
}

.picker-column {
  flex: 1;
  margin: 0 10rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.picker-item {
  padding: 24rpx;
  font-size: 30rpx;
  text-align: center;
  transition: all 0.3s;
  border-bottom: 1px solid #f0f0f0;
}

.picker-item:last-child {
  border-bottom: none;
}

.picker-item.active {
  color: #8B4513;
  font-weight: bold;
  background: linear-gradient(90deg, #FCFAF6, #ffffff);
  border-left: 8rpx solid #8B4513;
  border-radius: 0 20rpx 20rpx 0;
}

.picker-item:active {
  background-color: #f2f2f2;
}

.picker-item:hover {
  background-color: #f9f9f9;
}
</style>
